<template>
    <div>
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in slideData" :key="item.img">
                <img :src="item.img">
            </mt-swipe-item>
        </mt-swipe>
        <ul class="content-plugins">
            <li class="plugins-item">
                <i class="fab fa-periscope" style="color:#1ed599;"></i>
                <p>新闻资讯</p>
            </li>
            <li class="plugins-item">
                <i class="fas fa-images" style="color:#fc3c50;"></i>
                <p>图片分享</p>
            </li>
            <li class="plugins-item">
                <i class="fas fa-baby-carriage" style="color:#3f7bfd;"></i>
                <p>商城购物</p>
            </li>
        </ul>
        <ul class="content-plugins">
            <li class="plugins-item">
                <!-- <i class="far fa-question-circle"></i> -->
                <i class="far fa-comment-dots" style="color:#2ac1f6;"></i>
                <p>留言反馈</p>
            </li>
            <li class="plugins-item">
                <i class="far fa-play-circle" style="color:#fb3f00;"></i>
                <p>视频浏览</p>
            </li>
            <li class="plugins-item">
                <i class="fab fa-buffer" style="color:#ff772b;"></i>
                <p>联系我们</p>
            </li>
        </ul>


        <!-- <h3>这是 HomeContainer 组件</h3> -->
    </div>
</template>

<script>

import { Toast } from "mint-ui";


export default {
    data(){
        return {
            slideData:null,
        }
    },
    created(){
        this.getSlideData();
    },
    methods:{
        // ,{},{ headers:{},emulateJSON: true }
        getSlideData(){
            this.$http.get("http://127.0.0.1:5000").then(response => {
                this.slideData = response.body;
            },function(){
                Toast("加载失败了~~");
            });
        },
    }
}
</script>

<style scoped>
    /* 设置轮播图样式 */
    .mint-swipe{
        width: 100%;
        height: 450px;
    }
    .mint-swipe .mint-swipe-item{
        position: relative;
        box-sizing: border-box;
        text-align: center;
        width: 100%;
        height: 100%;
    }
    .mint-swipe .mint-swipe-item > img{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        height: 100%;
    }

    /* 六宫格 */
    .content-plugins{
        position: relative;
        width: 100%;
        height:260px;
        display: flex;
        padding: 0;
        margin: 0;
        /* background-color: aqua; */
    }
    .content-plugins .plugins-item{
        list-style-type: none;
        box-sizing: border-box;
        flex: 1;
        float: left;
        height: 260px;
        text-align: center;
        padding-top: 80px;
    }
    .content-plugins li[data-v-4fcacc3e] > i{
        box-sizing: border-box;
        width: 120px;
        height: 120px;
        font-size: 120px;
        color: #b0b0b0;
    }
    .content-plugins .plugins-item > p{
        display: block;
        font-size: 30px;
        font-weight: 100;
        margin-bottom: 0;
        padding: 20px 0;
        color: #7c7c7c;
    }
</style>

